<template>
	<view class="container">
	  <view class="info-box">
	    <view style="text-align: center;margin-bottom:10%;">
		  <image class="avatar-img" :src="avatarUrl" :data-url="avatarUrl"></image>
		  <navigator ><button size="mini" type="primary" @click="chooseImg" >上传图片</button></navigator>
	    </view >
		<view>
		<view class="a">
			<view>用户名：</view>
			<view><input class="userName" type="text" :value="userName" @input="getuserName" placeholder="请输入用户名" /></view>
		</view>
		<view class="a">
			<view>用户ID：</view>
			<view><input class="userId" type="text" :value="userId" @input="getuserId" placeholder="请输入用户ID"/></view>
		</view>
		<view class="a">
			<view>密码：  </view>
			<view>
				<input class="key" type="text" :value="key" @input="getkey" password="true" maxlength="8" placeholder="请设置密码"/>
			</view>
		</view>
		
		<view class="a">
			<view>性别：</view>
			<view>
				<picker @change="getsex" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>
		</view>
		<view class="a">
			<view>年龄：</view>
			<view><input class="age" type="number" :value="age" @input="getage" placeholder="请输入年龄"/></view>
		</view>
		<view class="a">
			<view>电话： </view>
			<view><input class="phone" type="number" :value="phone" @input="getphone" placeholder="请输入电话号码" maxlength="11"/></view>
		</view>
		</view>
		<view style="text-align: center; center;margin-top: 10%;margin-left: 35%;margin-right: 35%;">
			<button size="mini"  type="primary"  @click="saveinfor">保存修改</button>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex: [{
					id: 1,
					name: '男'
				}, {
					id: 0,
					name: '女'
				}],
				index: 0,
				userName:"",
				userId:"",
				age:"",
				phone:"",
				avatarUrl:"../../../static/avatar_unknow.jpeg"
			}
		},
		methods: {
			chooseImg(){
				uni.chooseImage({
					count:1,
					sourceType:"album",
					sizeType:"original",
					success:res=>{
						this.avatarUrl=res.tempFilePaths;
					},
					fail:res=>{
						this.avatarUrl="../../../static/avatar_unknow.jpeg"
					},
				});
			},
			getuserName(e){
				this.userName=e.detail.value;
			},
			getuserId(e){
				this.userId=e.detail.value;
			},
			getkey(e){
				this.key=e.detail.value;
			},
			getsex(e){
				this.index = e.detail.value;
			},
			getage(e){
				this.age=e.detail.value;
			},
			getphone(e){
				this.phone=e.detail.value;
			},
			saveinfor(){
				uni.request({
					url:"http://rap2api.taobao.org/app/mock/286869/personal/information",
					method:'GET',
					data:{
						userName:this.userName,
						userId:this.userId,
						key:this.key,
						index:this.index,
						age:this.age,
						phone:this.phone,
						avatarUrl:this.avatarUrl
					},
					success:res=>{
						this.phone=res.data.phone;
						this.age=res.data.age;
						this.index=res.data.sex;
						this.key=res.data.key;
						this.userId=res.data.userId;
						this.userName=res.data.userName;
						this.avatarUrl=res.data.avatarUrl;
						uni.showToast({
							title:'上传成功'
						})
						setInterval(function(){
							uni.switchTab({
								url:'../inforShow/inforShow'
							})
						},1000)
					},
					fail: res => {
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			onload(){
			}
		}
	}
</script>

<style>
	
	.info-box{
	  width: 100%;
	},
	.avatar-img {
	  width: 100px;
	  height: 100px;
	  border: 1px solid gray;
	},
	.a{
		display: flex;
		flex-direction:row;
		margin-left: 10%;
		margin-right: 10%;
		padding-top: 5%;
		border-bottom: 1rpx solid #8799A3;
	}
	

</style>
